<template>
  <div class="type-manage">
    <!-- 添加节点类型弹框 -->
    <b-modal
      id="add-node-type-modal"
      size="mid"
      no-stacking
      v-model="showAddNodeTypeModal"
    >
      <div class="form">
        <div class="form-line flex-sp-ar">
          <div class="label">节点类型</div>
          <div class="form-item">
            <b-form-input style="font-size: 14px" placeholder="请输入节点类型" size="sm" v-model="newNodeType"></b-form-input>
          </div>
        </div>
      </div>
      <!-- 底部配置 -->
      <template slot="modal-footer">
        <div style="height: 40px; width: 40%" class="flex-right-center">
          <b-button variant="primary" @click="addNodeTypeService" style="font-size: 14px; margin-right: 10px">确定</b-button>
          <b-button variant="outline-danger" @click="showAddNodeTypeModal = false" style="font-size: 14px">取消</b-button>
        </div>
      </template>
      <!-- 头部配置 -->
      <template slot="modal-header">
        <div class="header flex-left-center">新增节点类型</div>
      </template>
    </b-modal>
    <!-- 添加关系类型的弹框 -->
    <b-modal
      id="add-relation-type-modal"
      size="mid"
      no-stacking
      v-model="showAddRelationTypeModal"
    >
      <div class="form">
        <div class="form-line flex-sp-ar">
          <div class="label">关系类型</div>
          <div class="form-item">
            <b-form-input style="font-size: 14px" placeholder="请输入关系类型" size="sm" v-model="newRelationType"></b-form-input>
          </div>
        </div>
      </div>
      <!-- 底部配置 -->
      <template slot="modal-footer">
        <div style="height: 40px; width: 40%" class="flex-right-center">
          <b-button variant="primary" @click="addRelationTypeService" style="font-size: 14px; margin-right: 10px">确定</b-button>
          <b-button variant="outline-danger" @click="showAddRelationTypeModal = false" style="font-size: 14px">取消</b-button>
        </div>
      </template>
      <!-- 头部配置 -->
      <template slot="modal-header">
        <div class="header flex-left-center">新增关系类型</div>
      </template>
    </b-modal>

    <SideBar
      :clickNodeType="clickNodeType"
      :clickRelationType="clickRelationType"
      :currentType="currentType"
      :openAddNodeTypeModal="openAddNodeTypeModal"
      :openAddRelationTypeModal="openAddRelationTypeModal"
    />
    <div class="main" ref="main">
      <el-table
        :data="tableData"
        border
        :style="{ width: '100%' }"
        :height="tableHeight"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="type"
          :label="currentType"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="currentType.slice(0, 2) + '数量'"
          prop="count"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { SideBar } from '@/components/type-manage'
import {
  getNodeTypes,
  getRelationTypes,
  addNodeType,
  addRelationType,
  getNodeCountByType,
  getRelationCountByType
} from '@/api/type'

export default {
  components: {
    SideBar
  },
  mounted () {
    this.getNodeTypesService()
  },
  data () {
    return {
      tableHeight: window.innerHeight - 60,
      loading: false,
      dataLoading: false,
      currentType: '节点类型',
      tableData: [],
      showAddNodeTypeModal: false,
      newNodeType: '',
      showAddRelationTypeModal: false,
      newRelationType: ''
    }
  },
  methods: {
    async addNodeTypeService () {
      if (this.newNodeType === '') {
        this.$message.warning('节点类型不能为空')
        return false
      }
      this.loading = this.$loading({
        text: '正在更新节点类型...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await addNodeType(this.newNodeType)
      this.loading.close()
      this.showAddNodeTypeModal = false
      if (res.status === 'fail') {
        this.$message.warning(res.msg)
      } else {
        await this.getNodeTypesService()
        this.$message.success('添加成功')
      }
    },
    async addRelationTypeService () {
      if (this.newRelationType === '') {
        this.$message.warning('关系类型不能为空')
        return false
      }
      this.loading = this.$loading({
        text: '正在更新关系类型...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await addRelationType(this.newRelationType)
      this.loading.close()
      this.showAddRelationTypeModal = false
      if (res.status === 'fail') {
        this.$message.warning(res.msg)
      } else {
        await this.getRelationTypesService()
        this.$message.success('添加成功')
      }
    },
    openAddNodeTypeModal () {
      this.showAddNodeTypeModal = true
    },
    openAddRelationTypeModal () {
      this.showAddRelationTypeModal = true
    },
    async getNodeTypesService () {
      this.dataLoading = this.$loading({
        text: '正在查询...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await getNodeTypes()
      this.tableData = res.data.map((item, index) => {
        return {
          id: index + 1,
          type: item,
          count: '加载中...'
        }
      })
      this.dataLoading.close()
      let newTableData = this.tableData.map(item => {
        return getNodeCountByType(item.type)
      })
      Promise.all(newTableData).then(res => {
        newTableData = this.tableData.map((item, index) => {
          return {
            ...item,
            count: res[index].status === 'success' ? res[index].data : '加载失败'
          }
        })
        this.tableData = newTableData
      })
    },
    async getRelationTypesService () {
      this.dataLoading = this.$loading({
        text: '正在查询...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const res = await getRelationTypes()
      this.tableData = res.data.map((item, index) => {
        return {
          id: index + 1,
          type: item,
          count: '加载中...'
        }
      })
      this.dataLoading.close()
      let newTableData = this.tableData.map(item => {
        return getRelationCountByType(item.type)
      })
      Promise.all(newTableData).then(res => {
        newTableData = this.tableData.map((item, index) => {
          return {
            ...item,
            count: res[index].status === 'success' ? res[index].data : '加载失败'
          }
        })
        this.tableData = newTableData
      })
    },
    lookType (row) {
      console.log(row)
    },
    clickNodeType (curType) {
      this.currentType = curType
      this.getNodeTypesService()
    },
    clickRelationType (curType) {
      this.currentType = curType
      this.getRelationTypesService()
    }
  }
}
</script>

<style lang="stylus" scoped>
.type-manage
  width: 100%
  height: calc(100% - 60px)
  display: flex
.main
  width: calc(100% - 60px)
  height: 100%
  overflow-y: scroll
  &::-webkit-scrollbar
    display: none
.add-type-btn
  position fixed
  top 100px
  right: 100px
  border-radius: 50%
  z-index: 99
  box-shadow: 0px 0px 15px 0px #007bffaa
.form-line
  height: 50px
  width: 100%
  .form-item
    width: 80%
</style>
